<template>
  <div>
    <el-card shadow="never">
      <el-row :gutter="8" class="dept-modal-row">
        <el-col :span="5">
          <x-tree :showSearch="true" @changeTree="handleChangeTree" />
        </el-col>
        <el-col :span="19">
          <div class="ofh mb10" style="line-height: 32px">
            <span>
              当前所选部门：
              <span>{{ mdl.parentName }}</span>
            </span>
            <el-button
              class="fr"
              v-if="mdl.parentName"
              icon="el-icon-plus"
              type="primary"
              @click="handleEdit(false, {})"
            />
          </div>
          <dept-table ref="deptTable" @edit="handleEdit" />
        </el-col>
      </el-row>
      <dept-modal ref="deptModal" @refresh="handleRefresh" />
    </el-card>
  </div>
</template>

<script>
import DeptTable from './Table'
import XTree from '@/components/DeptTree'
import DeptModal from './Modal'

export default {
  name: 'DeptMan',
  components: {
    XTree,
    DeptTable,
    DeptModal
  },
  data() {
    return {
      treeData: [],
      mdl: {}
    }
  },
  methods: {
    handleRefresh() {
      this.$refs.deptTable.handleGetList()
      this.getDeptTree()
    },
    handleSearch(param) {
      this.$refs.deptTable.handleGetList(param)
    },
    handleChangeTree(obj) {
      console.log('obj', obj)
      this.mdl = Object.assign({}, obj)
      this.$refs.deptTable.getId(obj)
      this.$refs.deptModal.getId(obj)
    },
    handleEdit(bool, record, type = null) {
      this.$refs.deptModal.edit(bool, record, type)
    }
  }
}
</script>